<template>
	<view @click="emits('click', $event)" class="flex relative" :class="[props.status ? 'flex-row flex-row-center-center mx-8' : '']">
		<view v-if="!props.status" eventPenetrationEnabled="true">
			<slot></slot>
		</view>
		<view
			eventPenetrationEnabled="true"
			v-if="show"
			:class="[
				(_dot || _count || _icon) && !props.status ? 'absolute flex-top-start-end r-0' : '',
				props.top ? `t-${String(props.top)}` : '',
				props.right ? `r-${String(props.right)}` : ''
			]"
			:style="{ zIndex: 10 }"
		>
			<tm-sheet
				:color="props.color"
				:_class="[customClass, 'flex-center flex-col']"
				:_style="[customCSSStyle, { flexShrink: 1 }]"
				:followTheme="props.followTheme"
				:dark="props.dark"
				:round="props.round"
				:shadow="props.shadow"
				:outlined="props.outlined"
				:border="props.border"
				:borderStyle="props.borderStyle"
				:borderDirection="props.borderDirection"
				:text="props.text"
				:transprent="props.transprent"
				:linear="props.linear"
				:linearDeep="props.linearDeep"
				:width="size.w"
				:height="size.h"
				:margin="props.margin"
				:padding="props.padding"
			>
				<tm-text
					color="white"
					:font-size="props.fontSize"
					:_class="size.h == 0 ? 'py-3 px-6' : ''"
					v-if="_count > 0 && !istext"
					:label="_count > props.maxCount ? props.maxCount + '+' : _count"
				></tm-text>
				<tm-text
					color="white"
					:font-size="props.fontSize"
					:_class="size.h == 0 ? 'py-3 px-6' : ''"
					v-if="_count && istext"
					:label="_count"
				></tm-text>
				<tm-icon color="white" :font-size="props.fontSize" :name="_icon" v-if="_icon"></tm-icon>
			</tm-sheet>
		</view>
		<tm-text eventPenetrationEnabled="true" :font-size="props.fontSize" _class="ml-10" v-if="props.status" :label="props.label"></tm-text>
	</view>
</template>

<script lang="ts" setup>
/**
   * 徽标
   * @description 可单独使用，也可使用插槽。
   * @example <view class="flex-row flex-wrap pa-32" >
      <tm-badge dot color="red">
        <tm-avatar :round="0" label="A"></tm-avatar>
      </tm-badge>
      <tm-badge :count="5"  color="red">
        <tm-avatar label="A"></tm-avatar>
      </tm-badge>
      <tm-badge dot color="red">
        <tm-icon color="primary" name="tmicon-clock-fill"></tm-icon>
      </tm-badge>
      <tm-badge :count="999"  color="red">
        <tm-avatar label="A"></tm-avatar>
      </tm-badge>
      <tm-badge :count="1000"  color="red">
        <tm-avatar label="A"></tm-avatar>
      </tm-badge>
      <tm-badge count="HOT"  color="red">
        <tm-avatar label="A"></tm-avatar>
      </tm-badge>
      <tm-badge icon="tmicon-collection-fill" color="red">
        <tm-avatar label="A"></tm-avatar>
      </tm-badge>
      <tm-badge status dot  label="情况不秒呀." color="green"></tm-badge>
    </view>
   */
import { computed, PropType } from 'vue'
import { custom_props, computedTheme, computedClass, computedStyle, computedDark } from '../../tool/lib/minxs'
import tmSheet from '../tm-sheet/tm-sheet.vue'
import tmText from '../tm-text/tm-text.vue'
import tmIcon from '../tm-icon/tm-icon.vue'
const emits = defineEmits(['click'])
const props = defineProps({
	...custom_props,
	round: {
		type: [Number],
		default: 6
	},
	border: {
		type: [Number],
		default: 0
	},
	margin: {
		type: Array as PropType<Array<number>>,
		default: () => [0, 0]
	},
	padding: {
		type: Array as PropType<Array<number>>,
		default: () => [0, 0]
	},
	transprent: {
		type: [Boolean],
		default: false
	},
	label: {
		type: String,
		default: ''
	},
	fontSize: {
		type: Number,
		default: 22
	},
	//为真时，隐藏插槽数据，展现状态文本模式。
	status: {
		type: [Boolean],
		default: false
	},
	dot: {
		type: [Boolean],
		default: false
	},
	icon: {
		type: [String],
		default: ''
	},
	//如果count为数字时，显示数字角标，如果为string是显示文本角标。
	count: {
		type: [Number, String],
		default: 0
	},
	maxCount: {
		type: [Number],
		default: 999
	},
	top: {
		type: [Number],
		default: 0
	},
	right: {
		type: [Number],
		default: 0
	}
})
//自定义样式：
const customCSSStyle = computed(() => computedStyle(props))
//自定类
const customClass = computed(() => computedClass(props))
//让出多少蹑以显示角标。
const istext = computed(() => {
	return isNaN(parseInt(String(props.count)))
})
const show = computed(() => {
	if (!props.dot && !props.icon && !props.count) return false
	return true
})
const size = computed(() => {
	if (props.status || props.dot) {
		return {
			w: 12,
			h: 12,
			pr: 6,
			t: 3
		}
	}
	if (props.icon) {
		let p = props.fontSize * 1.6
		return {
			w: p,
			h: p,
			pr: 12,
			t: 10
		}
	}
	if (isNaN(parseInt(String(props.count)))) {
		return {
			w: 0,
			h: 0,
			pr: 10,
			t: 10
		}
	}
	if (props.count < 10) {
		return {
			w: 30,
			h: 30,
			pr: 12,
			t: 10
		}
	}
	if (props.count >= 10) {
		return {
			w: 0,
			h: 0,
			pr: 10,
			t: 10
		}
	}
	return {
		w: 0,
		h: 0,
		pr: 0,
		t: 0
	}
})
const _icon = computed(() => props.icon)
const _dot = computed(() => props.dot)
const _count = computed(() => props.count)
</script>

<style scoped></style>
